<template>
	<view class="results">
		<view class="container" :class="{'active_bg':resultobj.is_match}">
			<view class="header">
				<!-- 我的资料区域 -->
				<view class="nav_user" :class="{'active_bor':resultobj.is_match}">
					<view class="user_head" v-if="resultobj.user">
						<image :src="resultobj.user.avatarUrl"></image>
						<view>Hi！{{resultobj.user.nickName}}</view>
					</view>
					<view class="my" @click="headleMy">我的资料</view>
				</view>
				<!-- 成功或者失败区域  标题和期数 -->
				<view class="nav_medd">
					<view class="result">
						<view class="title">
							<view :style="{color:resultobj.is_match?'':'#000000'}">
								{{resultobj.is_match?"恭喜，匹配成功！":"抱歉，匹配失败"}}
								<image src="../../static/image/fail.png" v-if="!resultobj.is_match"></image>
							</view>
							<view v-if="resultobj.is_match">Congratulations，match successful</view>
							<view v-else>Sorry，matching failed</view>
						</view>
						<view class="period">
							<view>{{resultobj.phase}}期</view>
							<view>{{resultobj.match_type===1?"普通":resultobj.match_type===2?"高级":"优先"}}匹配</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content">

				<!-- 高级或优先匹配 /失败-->
				<view v-if="resultobj.refund.status!=4">
					<view class="item"
						v-if="!resultobj.is_match && resultobj.match_type>1 && resultobj.refund.status===0 || resultobj.refund.status===3">
						<view class="fail">
							<view class="fail_up">
								<view class="le">
									<view>免费报名下期</view>
									<view>Next period for free</view>
								</view>
								<view class="ri_head" @click="haeldeIsWx">
									<view class="ri" :class="{'ri_acti':resultobj.refund.status!==0}">
										{{resultobj.refund.status===0?"马上报名":resultobj.refund.status===3?"已报名":""}}
									</view>
								</view>
							</view>
							<view class="explain">
								<view>保留退款，0元报名下期，继续享受<view class="grade">
										「{{resultobj.match_type===1?"普通":resultobj.match_type===2?"高级":"优先"}}匹配」</view>
									特权（第二优先级，匹配成功率80%，匹配失败仍可申请退款）</view>
							</view>
						</view>
						<view class="hint">无需重复填写资料，查看/修改请点击右上角「我的资料」</view>
					</view>
				</view>

				<view :class="{isMiniprogram:'activeis'}">
					<view :class="{'activeSign':resultobj.refund.status!==0}">
						<view class="Sign">
							<wx-open-subscribe ref="subscribeBtn" :template="subTemplateIdsSign" id="subscribe-btnSign">
								<script type="text/wxtag-template">
									<style>.btn { padding: 12px}</style>
						  <button class="btn"> 点击 点击</button>
						</script>
							</wx-open-subscribe>
						</view>
					</view>
				</view>

				<!-- 普通匹配 /失败-->
				<view v-if="!resultobj.is_match && resultobj.match_type===1  &&  resultobj.coupon.status!=0"
					class="item1">
					<view class="title">
						送您「高级匹配」体验券
					</view>
					<view class="grid">
						<view class="head">
							<view class="hint">
								<view>高级匹配·体验券</view>
								<view class="time">
									<view v-if="resultobj.coupon.status!==3">
										<uni-countdown backgroundColor="none" style="width:120upx;"
											splitorColor="rgba(130, 113, 239, 75)" color="rgba(130, 113, 239, 75)"
											:show-day="false" :hour="hours" :minute="minutes" :second="seconds">
										</uni-countdown>
									</view>
									<view :class="{'past':resultobj.coupon.status==3}">
										{{resultobj.coupon.status==3?"已过期":"后过期"}}
									</view>
								</view>
							</view>
							<view>
								<view class="use" :class="{'defa':resultobj.coupon.status>1 }"
									@click="headleUse(resultobj.phase,resultobj.coupon.status)">
									{{resultobj.coupon.status===1?"马上使用":resultobj.coupon.status===2?"已使用":"已过期"}}
								</view>
							</view>
						</view>
						<view class="valid">有效期12小时，请尽快使用</view>
					</view>
					<view class="declare">
						使用说明：使用体验券报名下期72小时CP，即可<view>{{resultobj.coupon.price}}元</view>
						<view>体验价</view>享受「高级匹配」特权：第二优先级，80%匹配成功率，匹配失败全额退款，体验券有效期12小时。
					</view>
				</view>

				<!-- 退款或退款中 高级/优先-->
				<view
					v-if="!resultobj.is_match && (resultobj.refund.status===1 || resultobj.refund.status===2  || resultobj.refund.status===4)">
					<view class="period">
						<view class="le">
							<view>报名下期</view>
							<view>Next period</view>
						</view>
						<image @click="headleNextPeriod" src="../../static/image/qu.png"></image>
					</view>
				</view>

				<!-- 匹配成功 普通/高级/优先-->
				<view class="item2" v-if="resultobj.is_match">
					<view class="user_message">
						<view class="le">
							<view class="portrait" @click="headleDatum(resultobj.match_user)">
								<image v-if="resultobj.match_user.avatarUrl" :src="resultobj.match_user.avatarUrl">
								</image>
							</view>
							<view class="information">
								<view>{{resultobj.match_user.nickName}}</view>
								<view>
									{{resultobj.match_user.province}}{{resultobj.match_user.city}}·{{resultobj.match_user.age}}岁·{{resultobj.match_user.situation===0?"学生":"工作"}}党
								</view>
							</view>
						</view>
						<view class="wechat" @click="copyBtn(resultobj.match_user.wechat)">复制微信号</view>
					</view>
					<view class="title">
						<image src="/static/image/sahng.png"></image>
						<view>点击Ta的头像可以查看对方资料哦～</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<!-- 匹配失败 申请退款  高级/优先-->
			<view class="foor_fe">
				<view class="item"
					v-if="!resultobj.is_match && resultobj.match_type>1 && (resultobj.refund.status===0 || resultobj.refund.status>2)">
					<view class="apply">
						<view class="le">
							<view>申请退款 {{resultobj.refund.price}}元</view>
							<view>Apply for resultobj.refund</view>
						</view>
						<view class="orde" @click="haeldeIsWx">
							<view class="ri" :class="{'ri_ne':resultobj.refund.status>0 && resultobj.refund.status<4}">
								{{(resultobj.refund.status===0 || resultobj.refund.status===4)?"发起申请":resultobj.refund.status===3?"下期申请":""}}
							</view>
						</view>
					</view>
				</view>

				<view :class="{isMiniprogram:'activeis'}">
					<view class="boxss" :class="{'noboxss':resultobj.refund.status>0 && resultobj.refund.status<4}">
						<wx-open-subscribe ref="subscribeBtn" :template="subTemplateId" id="subscribe-btn">
							<script type="text/wxtag-template">
								<style>.btn { padding: 12px}</style>
						    <button class="btn">
								点击点击点
							</button>
						  </script>
						</wx-open-subscribe>
					</view>
				</view>
			</view>
			<!-- 退款/已退款 高级/优先 -->
			<view>
				<view class="refunded"
					v-if="!resultobj.is_match && resultobj.match_type>1 && (resultobj.refund.status===1 || resultobj.refund.status===2)">
					<view class="le">
						<view>{{resultobj.refund.status===1?"退款中...":"已退款"}}</view>
						<view>{{resultobj.refund.status===1?"24小时内到账":"退款已完成"}}</view>
					</view>
					<view @click="headlePreviw(resultobj.refund.status)" class="ri"
						:class="{'forbidden':resultobj.refund.status===2}">
						{{resultobj.refund.status===1?`已申请${resultobj.refund.price}元退款`:"没收到退款？"}}
					</view>
				</view>
			</view>
			<!-- 匹配成功 -->
			<view class="item2" v-if="resultobj.is_match">
				<image :src="resultobj.groupQrcode"></image>
				<view>请长按保存二维码
					入群，领取CP任务</view>
			</view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	export default {
		data() {
			return {
				resultobj: {
					user: {
						nickName: '',
						avatarUrl: ''
					},
					phase: '',
					match_type: 1,
					is_match: false,
					match_user: {
						nickName: '',
						avatarUrl: ''
					},
					refund: {
						status: 0,
						price: '0.01'
					},
					groupQrcode: '',
					coupon: {
						status: 0
					},
				}, //保存查询结果

				hours: 0, //小时
				minutes: 0, //分钟
				seconds: 0, //秒数
				phase: null, //期数
				subTemplateId: ['GREuyqLbQRuY01enNZsTg8KWiYG9Rm8lujGK7AjwECk',
					'4kh2CXv0ZV9vjWkvq6Se3MTKY8AQYwylIqFb2yQfVBw', '8Uvon-foP0PyW3TcbllqokQelmiqOnBctl8fTfwZJhY'
				],

				subTemplateIdsSign: ['8Uvon-foP0PyW3TcbllqokQelmiqOnBctl8fTfwZJhY',
					'SKG6uQJdZlvsDS86ql9S78A6YL7Z207Je85-H9tZ8HE', '8Icdi9jQZfy9s1iJ0ke7UXuARS4o1qR0CX84ASDxuvY',
					'0uwnOICQYDtCNFYXXe71yiuIRKMx3xHZrSQjWBBftbk', '4kh2CXv0ZV9vjWkvq6Se3MTKY8AQYwylIqFb2yQfVBw'
				],

				state: false,
				isMiniprogram: false
			}
		},
		computed: {},
		onLoad(options) {
			this.phase = options.phase || 0
			this.getRequestParams()
			this.getAuth()


		},
		onShow() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				//ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
				jweixin.miniProgram.getEnv((res) => {
					if (res.miniprogram) {
						this.isMiniprogram = true
					} else {
						this.isMiniprogram = false
					}
				})
			}
		},

		onReady() {
			let that = this
			jweixin.ready(function(res) {
				const btn = document.getElementById('subscribe-btnSign');
				btn.addEventListener('success', function(e) {
					let attend = false;
					let subscribeDetails = JSON.parse(e.detail.subscribeDetails);
					for (let i in that.subTemplateIdsSign) {
						let subKey = subscribeDetails[that.subTemplateIdsSign[i]];
						let status = JSON.parse(subKey);
						let type = false;
						switch (status.status) {
							case "reject":
								type = false;
								break;
							case "cancel":
								type = false;
								break;
							case "filter":
								type = false;
								break;
							default:
								type = true;
								break;
						}
						if (!type) {
							// 如果其中有一个模板没有订阅，则全部不通过过
							attend = false;
							break;
						} else {
							attend = true;
						}
					}
					if (!attend) {
						return;
					}
					uni.showToast({
						title: "报名中",
						mask: true,
						icon: "loading"
					})
					that.headleApply(that.resultobj.refund.status, that.resultobj.phase)
				});

				btn.addEventListener('error', function(e) {
					alert("取消")
				});


				const btn1 = document.getElementById('subscribe-btn');
				btn1.addEventListener('success', function(e) {
					let attend = false;
					let subscribeDetails = JSON.parse(e.detail.subscribeDetails);
					for (let i in that.subTemplateId) {
						let subKey = subscribeDetails[that.subTemplateId[i]];
						let status = JSON.parse(subKey);
						let type = false;
						switch (status.status) {
							case "reject":
								type = false;
								break;
							case "cancel":
								type = false;
								break;
							case "filter":
								type = false;
								break;
							default:
								type = true;
								break;
						}
						if (!type) {
							// 如果其中有一个模板没有订阅，则全部不通过过
							attend = false;
							break;
						} else {
							attend = true;
						}
					}
					if (!attend) {
						return;
					}
					uni.showToast({
						title: "申请中",
						mask: true,
						icon: "loading"
					})
					that.headleRefund(that.resultobj.refund.status, that.resultobj.phase)
				});

				btn1.addEventListener('error', function(e) {
					alert("取消")
				});

			});
			jweixin.error(function(res) {

			});
		},

		methods: {
			haeldeIsWx() {
				if (!this.isMiniprogram) return
				location.href = this.resultobj.web_view
			},



			headlePreviw(state) {
				if (state !== 1) {
					uni.previewImage({
						urls: ['../../static/image/kf.png']
					})
				}
			},

			// 用户授权
			getAuth() {
				let params = this.getRequestParams();
				let code = params['code'];
				let state = params['state']
				let that = this
				if (code) {
					that.$myRequesyToken({
						url: 'Login',
						method: "POST",
						data: {
							code
						}
					}).then(res => {
						if (res.code === 0) {
							uni.setStorageSync("token", res.data.token)
							window.location.href =
								'https://xiangqin.needyoutd.com/cph5/index.html#/pages/results/results?phase=' +
								state
						}
					})
				} else {
					that.$myRequesy({
						url: 'user/match-result',
						data: {
							p_no: that.phase
						}
					}).then(res => {
						console.log(that.phase, 444444)
						if (res.code === 0) {
							that.phase = res.data.phase
							if (res.data.refund == null) {
								res.data.refund = {
									statue: 1,
									price: '0.1'
								}
							}
							that.resultobj = res.data
							if (res.data.coupon !== null) {
								that.hours = res.data.coupon.exp_hours
								that.minutes = res.data.coupon.exp_minutes
								that.seconds = res.data.coupon.exp_seconds
							}
						} else if (res.code === 2001 || res.code === 2002 || res.code === 2003) {
							window.location.href =
								'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc8b3f0e7db85fee2&redirect_uri=https%3A%2F%2Fxiangqin.needyoutd.com%2Fcph5%2Findex.html%23%2Fpages%2Fresults%2Fresults&response_type=code&scope=snsapi_userinfo&state=' +
								that.phase + '#wechat_redirect'
						}

					})

				}

			},
			//切割url路径  code 渠道参数
			getRequestParams() {
				let url = location.href;
				let requestParams = {};
				if (url.indexOf('?') !== -1) {
					let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
					let strs = str.split('&'); //将字符串内容以&分隔为一个数组
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				return requestParams;
			},


			//匹配结果查询
			getMatchResult() {
				let that = this
				that.$myRequesy({
					url: 'user/match-result',
					data: {
						p_no: that.phase
					}
				}).then(res => {
					if (res.code === 0) {
						that.phase = res.data.phase
						if (res.data.refund == null) {
							res.data.refund = {
								statue: 1,
								price: '0.1'
							}
						}
						that.resultobj = res.data
						if (res.data.coupon !== null) {
							that.hours = res.data.coupon.exp_hours
							that.minutes = res.data.coupon.exp_minutes
							that.seconds = res.data.coupon.exp_seconds
						}

					}

				})
			},
			// #ifdef H5
			//复制微信号
			copyBtn(info) {
				let result
				let textarea = document.createElement("textarea")
				textarea.value = info
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, info.length) // 设置选定区的开始和结束点
				uni.showToast({ //提示
					title: '已复制'
				})
				result = document.execCommand("copy") //将当前选中区复制到剪贴板
				textarea.remove()
			},
			// #endif


			// 高级/优先 马上报名
			headleApply(state, phase) {
				let that = this
				if (state === 0) {
					that.$myRequesy({
						url: 'user/free-regis',
						method: 'POST',
						data: {
							p_no: phase,
							from_state: uni.getStorageSync('id') || 0
						}
					}).then(res => {
						if (res.code === 0) {
							uni.navigateTo({
								url: '../succeed/succeed'
							})
							that.getMatchResult()
						} else if (res.code === 3008) {
							uni.showToast({
								title: "假期期间，暂停报名！",
								icon: "none"
							})
						}
					})
				}
			},

			// 退款申请
			headleRefund(state, phase) {
				let that = this
				if (state === 0 || state === 4) {
					that.$myRequesy({
						url: 'refund',
						method: "POST",
						data: {
							p_no: phase
						}
					}).then(res => {
						if (res.code === 0) {
							that.getMatchResult()

						} else {
							uni.showToast({
								title: "系统繁忙,稍后尝试!",
								icon: "none"
							})
						}
					})
				}


			},

			// 报名下期
			headleNextPeriod() {
				if (!this.isMiniprogram) {
					this.$myRequesy({
						url: 'regis/status'
					}).then(res => {
						if (res.code === 0) {
							if (res.data.state === 0) {
								uni.navigateTo({
									url: "../succeed/succeed"
								})
							} else if (res.data.state === 1) {
								uni.navigateTo({
									url: '/pages/apply/apply?status=4'
								})
							} else if (res.data.state >= 3) {
								uni.showToast({
									title: "假期期间，暂停报名!",
									icon: "none"
								})
							}
						}
					})
				} else {
					location.href = this.resultobj.web_view
				}

			},


			//匹配成功用户资料页
			headleDatum(userInfo) {
				uni.navigateTo({
					url: '../matching/matching?userInfo=' + JSON.stringify(userInfo)
				})
			},
			//普通匹配失败 马上使用
			headleUse(phase, status) {
				if (!this.isMiniprogram) {
					if (status === 1) {
						this.$myRequesy({
							url: 'regis/status'
						}).then(res => {
							if (res.code === 0) {
								if (res.data.state >= 3) {
									uni.showToast({
										title: "假期期间，暂停报名!",
										icon: "none"
									})
								} else {
									uni.navigateTo({
										url: '../experience/experience?phase=' + phase
									})
								}
							}
						})
					}
				} else {
					location.href = this.resultobj.web_view
				}
			},
			// 我的资料
			headleMy() {
				uni.navigateTo({
					url: '/pages/myprofile/myprofile'
				})
			},
		}
	}
</script>
<style>
	.uni-countdown .uni-countdown__number {
		width: 30upx !important;
	}
</style>
<style lang="scss" scoped>
	.results {
		.container {
			padding: 40upx 40upx;
			background-color: rgba(244, 245, 245, 100);

			.header {
				.nav_user {
					padding-bottom: 40upx;
					border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
					display: flex;
					justify-content: space-between;

					.user_head {
						display: flex;
						color: rgba(0, 0, 0, 0.8);
						font-size: 30upx;
						font-weight: 600;


						image {
							width: 42upx;
							height: 42upx;
							margin-right: 18upx;
							border-radius: 50%;
						}
					}

					.my {
						width: 140upx;
						height: 50upx;
						line-height: 50upx;
						border-radius: 40upx;
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;
						text-align: center;
						box-shadow: 2upx 2upx 2upx 0px rgba(255, 255, 255, 100);
						font-family: Arial;
						border: 2upx solid rgba(0, 0, 0, 0.05);
					}
				}

				.active_bor {
					border-bottom: 2upx solid rgba(227, 222, 255, 100);
				}

				.nav_medd {
					margin: 40upx 0upx;

					.result {
						display: flex;
						justify-content: space-between;

						.title {
							color: rgba(0, 0, 0, 0.35);
							font-size: 22upx;

							view:first-child {
								color: rgba(130, 113, 239, 100);
								font-size: 40upx;
								font-weight: 600;
								margin-bottom: 4upx;
								display: flex;
								align-items: center;

								image {
									margin-left: 12upx;
									width: 48upx;
									height: 48upx;
								}
							}

						}
					}

					.period {
						color: rgba(130, 113, 239, 100);
						font-size: 26upx;
						text-align: right;
					}
				}
			}

			.content {
				position: relative;

				.activeSign {
					position: absolute;
					right: -100%;
					top: -100%;
					opacity: 0;

				}

				.Sign {
					position: absolute;
					right: 14upx;
					top: 20upx;
					z-index: 999;
					border-radius: 20upx;
					opacity: 0;
					height: 64upx;
					width: 150upx;
				}

				// 匹配失败 高级或优先
				.item {
					.fail {
						width: 670upx;
						height: 332upx;
						border-radius: 20upx;
						background-color: rgba(255, 255, 255, 100);
						box-shadow: 0px 12upx 36upx 0px rgba(229, 224, 255, 100);
						padding: 40upx 40upx 30upx;

						.fail_up {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-bottom: 40upx;
							border-bottom: 2upx solid rgba(248, 247, 254, 100);
							color: rgba(130, 113, 239, 100);
							font-size: 24upx;

							.le {
								text-align: left;

								view:first-child {
									color: rgba(0, 0, 0, 0.8);
									font-size: 32upx;
									font-weight: 600;
									margin-bottom: 4upx;
								}
							}

							.ri_head {
								position: relative;


							}

							.ri {
								width: 160upx;
								height: 64upx;
								line-height: 64upx;
								border-radius: 40upx;
								background-color: rgba(255, 135, 48, 100);
								color: rgba(255, 255, 255, 100);
								font-size: 26upx;
								text-align: center;
								box-shadow: 0px 0px 4upx 0px rgba(255, 135, 48, 100);
								font-family: Arial;
								border: 2upx solid rgba(16, 16, 16, 0.05);
								font-weight: 600;
							}

							.ri_acti {
								background-color: #fff;
								box-shadow: none;
								border: 2upx solid rgba(130, 113, 239, 100);
								color: rgba(130, 113, 239, 100);
							}
						}

						.explain {
							margin-top: 30upx;
							color: rgba(0, 0, 0, 0.5);
							font-size: 26upx;

							view {
								display: inline-block;
							}

							.grade {
								color: rgba(130, 113, 239, 100);
								font-weight: 600;
							}
						}
					}

					.hint {
						margin-top: 20upx;
						color: rgba(0, 0, 0, 0.35);
						font-size: 26upx;
					}
				}


				// 普通匹配 /失败
				.item1 {
					width: 100%;
					height: 588upx;
					border-radius: 20upx;
					background-color: rgba(255, 255, 255, 100);
					box-shadow: 0px 12upx 36upx 0px rgba(227, 222, 255, 100);
					padding: 40upx;

					.title {
						color: rgba(0, 0, 0, 0.8);
						font-size: 32upx;
						font-weight: 600;
						padding-bottom: 40upx;
						border-bottom: 2upx solid rgba(248, 247, 254, 100);
					}

					.grid {
						width: 590upx;
						height: 240upx;
						border-radius: 16upx;
						background-color: rgba(246, 244, 255, 100);
						color: rgba(16, 16, 16, 100);
						font-size: 28upx;
						border: 2upx solid rgba(176, 166, 255, 0.20);
						padding: 40upx 0upx;

						.head {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 2upx solid rgba(255, 255, 255, 100);
							padding: 0upx 30upx;
							height: 120upx;

							.hint {
								color: rgba(130, 113, 239, 75);
								font-size: 24upx;
								padding-bottom: 30upx;

								view:first-child {
									font-size: 32upx;
									font-weight: 600;
									color: rgba(0, 0, 0, 0.8);
									// margin-bottom: 6upx;
								}

								.time {
									display: flex;
									align-items: center;

									view:first-child {
										margin-right: 10upx;
									}

									.past {
										font-size: 24upx;
										color: #999;
										margin-left: 20upx;
									}
								}
							}

							.use {
								width: 160upx;
								height: 64upx;
								line-height: 64upx;
								border-radius: 40upx;
								background-color: rgba(255, 135, 48, 100);
								color: rgba(255, 255, 255, 100);
								font-size: 26upx;
								text-align: center;
								box-shadow: 0px 0px 4upx 0px rgba(255, 135, 48, 100);
								border: 2upx solid rgba(16, 16, 16, 0.05);
								font-weight: 600;
							}

							.defa {
								background-color: #999;
								color: rgba(255, 255, 255, 100);
								box-shadow: 0px 0px 4upx 0px #999;
								border: 2upx solid rgba(16, 16, 16, 0.05);
							}
						}

						.valid {
							padding: 24upx 30upx;
							color: rgba(0, 0, 0, 0.35);
							font-size: 24upx;
						}

					}

					.declare {
						color: rgba(0, 0, 0, 0.5);
						font-size: 24upx;
						margin-top: 40upx;

						view {
							display: inline-block;
							color: rgba(130, 113, 239, 75);
							font-weight: 600;
						}
					}
				}

				// 匹配成功
				.item2 {
					.user_message {
						width: 670upx;
						height: 200upx;
						border-radius: 20upx;
						box-shadow: 0px 12upx 36upx 0px rgba(227, 222, 255, 100);
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 40upx;
						margin-bottom: 30upx;

						.le {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.portrait {
								width: 130upx;
								height: 130upx;
								border-radius: 50%;
								background-color: rgba(255, 255, 255, 100);
								border: 6upx solid rgba(227, 222, 255, 100);
								margin-right: 24upx;

								image {
									border-radius: 50%;
									width: 100%;
									height: 100%;
								}
							}

							.information {
								color: rgba(0, 0, 0, 0.5);
								font-size: 24upx;
								width: 260upx;

								view:first-child {
									color: rgba(0, 0, 0, 0.8);
									font-size: 30upx;
									margin-bottom: 10upx;
									font-weight: 600;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
								}
							}
						}

						.wechat {
							font-size: 13px;
							color: #8271ef;
						}
					}

					.title {
						display: flex;
						color: rgba(0, 0, 0, 0.35);
						font-size: 24upx;
						padding-bottom: 34upx;

						image {
							width: 34upx;
							height: 34upx;
							margin-right: 6upx;

						}

					}
				}

				//报名下期
				.period {
					width: 670upx;
					height: 160upx;
					border-radius: 20upx;
					background-color: rgba(255, 255, 255, 100);
					color: rgba(16, 16, 16, 100);
					font-size: 28upx;
					box-shadow: 0px 12upx 36upx 0px rgba(227, 222, 255, 100);
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0upx 40upx;

					.le {
						color: rgba(130, 113, 239, 100);
						font-size: 24upx;
						text-align: left;

						view:first-child {
							color: rgba(0, 0, 0, 0.8);
							font-size: 32upx;
							font-weight: 600;
							margin-bottom: 4upx;
						}
					}

					image {
						width: 48upx;
						height: 48upx;
					}
				}
			}
		}

		.active_bg {
			padding: 40upx 40upx 0upx;
			background-color: rgba(248, 247, 254, 100);
		}

		.footer {
			padding: 0upx 40upx;

			.foor_fe {
				position: relative;

				.boxss {
					width: 21%;
					height: 62upx;
					opacity: 0;
					position: absolute;
					bottom: 50upx;
					right: 50upx;
					z-index: 999;
				}

				.noboxss {
					position: absolute;
					right: -100%;
					top: -100%;
					opacity: 0;
				}
			}

			// 匹配失败 申请退款
			.item {
				margin-top: 40upx;

				.apply {
					width: 100%;
					height: 160upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2upx solid rgba(176, 166, 255, 0.20);
					border-radius: 20upx;
					padding: 0upx 40upx;

					.le {
						color: rgba(0, 0, 0, 0.35);
						font-size: 24upx;

						view:first-child {
							color: rgba(0, 0, 0, 0.8);
							font-size: 32upx;
							margin-bottom: 4upx;
						}
					}


					.ri {
						width: 160upx;
						height: 64upx;
						line-height: 64upx;
						text-align: center;
						border-radius: 40upx;
						background-color: rgba(255, 255, 255, 100);
						color: rgba(130, 113, 239, 100);
						font-size: 26upx;
						border: 2upx solid rgba(130, 113, 239, 100);
						font-weight: 600;
					}

					.ri_ne {
						color: rgba(130, 113, 239, 50);
						border: none;
						opacity: 0.5;
					}
				}
			}

			// 匹配成功
			.item2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 80upx;

				image {
					width: 250upx;
					height: 250upx;
					border-radius: 20upx;
				}

				view {
					margin-top: 30upx;
					width: 220upx;
					color: rgba(130, 113, 239, 100);
					font-size: 26upx;
				}
			}

			// 匹配失败 退款或退款中
			.refunded {
				width: 670upx;
				height: 160upx;
				border-radius: 20upx;
				background-color: rgba(248, 247, 254, 100);
				border: 2upx solid rgba(176, 166, 255, 0.20);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0upx 40upx;
				margin-top: 40upx;

				.le {
					color: rgba(130, 113, 239, 100);
					font-size: 24upx;

					view:first-child {
						color: rgba(0, 0, 0, 0.8);
						font-size: 32upx;
						font-weight: 600;
						margin-bottom: 4upx;
					}
				}

				.ri {
					color: rgba(130, 113, 239, 100);
					font-size: 28upx;
				}

				.forbidden {
					opacity: 0.5;
				}
			}
		}

		.activeis {
			display: none;
		}

	}
</style>
